<template>
	<view class="search" :style="{paddingTop: paddingtop}">
		<view class="fixed" :style="{position: position}">
		<searchs :mykey="key" @sonComfirm="myconfirm"></searchs>
			<!-- 导航 -->
			<view class="nav">
				<view class="item " :class="{active:currentIndex===index}" @click="changeIndex(index)" v-for="(item,index) in navs"
				 :key='index'>
					{{item}}
				</view>
			</view>
		</view>
		<!-- 详情 -->
		<view class="goods">
			<view class="comment" v-for="(item,index) in searchGoods" :key='index' @click="toDetails(item)">
				<view class="left">
					<image :src="item.goods_small_logo" mode=""></image>
				</view>
				<view class="right">
					<view class="tops">
						{{item.goods_name}}
					</view>
					<view class="bottom">
						￥<text>{{item.goods_price}}</text>.00
					</view>
				</view>
			</view>
		</view>
		<view v-if="searchGoods.length === total" class="end">
			---已经到底了---
		</view>
	</view>
</template>

<script>
	// 导入api
	import searchs from "../../components/searchCom.vue"
	import {
		goodSearch
	} from '../../api/searchList.js'
	export default {
		components:{
			searchs,
		},
		data() {
			return {
				navs: ["综合", "销量", "价格"],
				currentIndex: 0, // 导航高亮
				key: "", // 关键字
				pagenum: 1, // 当前页
				pagesize: 10, // 每页条数
				searchGoods: [], // 搜索列表
				total: undefined, // 总条数
				isrequ: false, //发送请求开关
				// 设置定位属性
				position: 'static',
				// 设置页面距离顶部的距离：如果 position=“static” 距离应该为 0 ,如果 position="fixed" 距离应该为 220
				paddingtop: '0rxp'
			}
		},
		onLoad(option) {
			this.key = option.key
			this.getSerachList() // 调用获取数据
		},
		// 下拉事件
		onPullDownRefresh() {
			// 重新赋值
			this.pagenum = 1
			this.searchGoods = []
			this.total = undefined
			this.getSerachList()
		},
		onReachBottom() {
			if (!this.isrequ) {
				this.pagenum++
			}

			this.getSerachList()
		},
		onPageScroll(options) {
			// 当滚动的距离为：0 时，position: 'static'
			// 当滚动的距离不为：0 时，position: 'fixed'
			if (options.scrollTop === 0) {
				this.position = 'static'
				this.paddingtop = '0rpx'
			} else {
				this.position = 'fixed'
				this.paddingtop = '220rpx'
			}
		},
		methods: {
			// 获取商品列表
			toDetails(item) {
				console.log(item)
				uni.navigateTo({
					url: "../details/details?id=" + item.goods_id
				})
			},

			async getSerachList() {
				
				// 正在发请求
				if (this.isrequ||this.key===undefined) {
					return
				}
				this.isrequ = true
				// 判断是否已经加载完全部
				if (this.searchGoods.length === this.total) {
					uni.showToast({
						title: '已经到底了'
					})
					return
				}
				// 发送请求获取数据 
				const res = await goodSearch({
					query: this.key,
					pagenum: this.pagenum,
					pagesize: this.pagesize
				})
				this.total = res.data.message.total
				this.searchGoods = [...this.searchGoods, ...res.data.message.goods] // 追加结果
				this.isrequ = false
			},
			// 导航点击事件
			changeIndex(index) {
				this.currentIndex = index
			},
			// 确认是触发的事件 
			myconfirm(key) {
				// 清除之前的数据
				this.key = key
				this.pagenum = 1

				this.searchGoods = []

				this.total = undefined

				this.getSerachList()
			}

		}
	}
</script>

<style lang="less">
	.search {
		.fixed {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
		}

		.nav {
			display: flex;
			line-height: 100rpx;
			border-bottom: 1px solid #C0C0C0;
			align-items: center;
			background-color: #FFFFFF;

			.item {
				width: 33.33%;
				text-align: center;

				&.active {
					color: #eb4450;
				}
			}
		}

		.goods {
			padding: 0 20rpx;

			.comment {
				display: flex;
				padding: 30rpx 0rpx;
				border-bottom: 1px solid #ddd;

				.left {
					padding-right: 30rpx;

					image {
						width: 200rpx;
						height: 200rpx;
					}
				}

				.right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.tops {
						line-height: 50rpx;
						display: -webkit-box;
						text-overflow: ellipsis;
						overflow: hidden;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2; //当属性值为3，表示超出3行隐藏
					}

					.bottom {
						color: #ff405a;

						text {
							font-size: 20 px;
						}
					}
				}
			}
		}

		.end {
			text-align: center;
			font-style: initial;
			color: #C0C0C0;
			line-height: 60rpx;
		}
	}
</style>
